<template>
  <div>
    <douyin-open-button v-if="type === 'dy'" :value="modelValue" :app-id="appId" />
    <wechat-open-button v-else-if="type === 'wx'" :value="modelValue" :app-id="appId" />
    <div v-else class="text-red">请指定正确的授权类型(type=wx/dy)</div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import DouyinOpenButton from './douyin-open-button.vue'
import WechatOpenButton from './wechat-open-button.vue'

defineOptions({
  name: 'DkOpenButton'
})

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'wx',
    validator: (value) => ['dy', 'wx'].includes(value)
  },
  appId: {
    type: [String, Number],
    required: true
  }
})
</script>

<style scoped>
.icon-work-wechat-o {
  font-size: 24px;
  margin-right: 10px;
  vertical-align: sub;
}
</style>
